Leven - Resume / CV / vCard Template v1.5

Thank you very much for purchasing from LMPixels!

If you have any issue or question that this document does not cover, you can contact us via email help@lmpixels.com.

Template Installation
HTML Structure
CSS Files and Structure
Scripts
PHP Integration (Contact Form)
Fonts
Credits
Customization
FAQ

Template Installation

You can view this template in any web browser from your computer, mobile device. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

Upload to The Server

It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
Select several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have three additional folders to upload: images, js and php.
Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js, .php into your FTP client.
Once the files are done uploading, you can try access your website via browser.

HTML Structure

This site template has a Responsive and Mobile-Friendly layout based on Bootstrap Boilerplate.

HTML files

index.html - main HTML file of this site template.
index-2.html - main page with the second version of the top of the page (block with a photo and text).
resume.html - Resume page.
portfolio.html - Portfolio page - 3 Columns.
portfolio-2-columns.html - Portfolio page - 2 Columns.
portfolio-4-columns.html - Portfolio page - 4 Columns.
portfolio-5-columns.html - Portfolio page - 5 Columns.
blog.html - Blog page - 2 Columns.
blog-3-columns.html - Blog page - 3 Columns.
contact.html - Contact page.
portfolio-project-1.html - HTML file with Portfolio page content.
blog-post-1.html - HTML file with Blog post page content.

CSS Files and Structure

We are using one main CSS file (main.css) in this template which you are free to modify depending on the customization you require.

If you would like to edit the color, font, or style of any elements, you would do the following in css/main.css :

If you would like to edit a specific section or page of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

There are also five additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder. The 5 style sheets are:

normalize.css - CSS file that makes browsers render all elements more consistently and in line with modern standards.
bootstrap.min.css - Minified version of Bootstrap 4.
owl.carousel.css - The main stylesheet for Carousels (Testimonials block on About me subpage & Portfolio details page).
magnific-popup.css - The main stylesheet for styling the lightbox.

These files are included in the 'head' of index.html and blog-post-1.html:

Scripts

This template uses several scripts. If you're a developer, you will find this particularly useful.

jquery-2.1.3.min.js (version 2.1.3) - used by the various JS files as a library.
imagesloaded.pkgd.min.js - Detect when images have been loaded.
jquery.shuffle.min.js - Categorize, sort, and filter a responsive grid of items.
jquery.magnific-popup.min.js - Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
masonry.pkgd.min.js - Cascading grid layout library
modernizr.custom.js - Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
owl.carousel.min.js - Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
validator.js - Contact form validator.
main.js - jQuery Plugins Initialisation, mobile menu, page loading animation.

PHP Integration (Contact Form)

This template also use the PHP engine for activate the contact form. Important: For the functioning of the contact form on your hosting should be PHP.

Please replace the email address with your email address, this address will receive messages from the contact form in the /contact_form/contact_form.php file.

Fonts

Helvetica, Sans-serif (both should be on your system as standard fonts)
Google Fonts Poppins.
Font Awesome Free version 5.12.1 (The complete set of 1,557 icons).
Linearicons Free Font.

Credits

Images (Just on live preview, not included in download package):

https://pixabay.com/

Videos

https://vimeo.com/channels/staffpicks

1. About files editing

For editing files I recommend you use Sublime Text 2 or similar program. Convenient following functions: syntax highlighting, find and replace function (to accelerate editing), etc.

2. Header logo

2.1. Text Logo + Symbol

Open index.html or another HTML file of our template.

Go to lines with

<!-- Text Logo -->
<div class="text-logo">
  <a href="index.html">
    <div class="logo-symbol">A</div>
    <div class="logo-text">Alex <span>Smith</span></div>
  </a>
</div>
<!-- /Text Logo -->

Change text.
Save file.

2.2. Image Logo

Open index.html or another HTML file of our template.

Go to lines with

<!-- Text Logo -->
<div class="text-logo">
  <a href="index.html">
    <div class="logo-symbol">A</div>
    <div class="logo-text">Alex <span>Smith</span></div>
  </a>
</div>
<!-- /Text Logo -->

Replace them with these lines:

Go to lines with

<div class="header-image">
  <a href="http://localhost/leven/">
      <img src="./img/logo.png" style="height: auto; max-height: 45px; width: auto; max-width: 169px;" alt="image">
  </a>
</div>

Set the size of your logo: "style="height: auto; max-height: 45px; width: auto; max-width: 169px;""

3.1. Main menu code

Open index.html or another HTML file of our template.

Main menu lines:

<ul class="leven-classic-menu site-main-menu">
  <li class="menu-item menu-item-has-children current-menu-item">
    <a href="index.html">About Me</a>
    <ul class="sub-menu">
      <li class="menu-item current-menu-item">
        <a href="index.html">About Me 1</a>
      </li>
      <li class="menu-item">
        <a href="index-2.html">About Me 2</a>
      </li>
    </ul>
  </li>

  <li class="menu-item">
    <a href="resume.html">Resume</a>
  </li>

  <li class="menu-item menu-item-has-children">
    <a href="portfolio.html">Portfolio</a>
    <ul class="sub-menu">
      <li class="menu-item">
        <a href="portfolio-2-columns.html">Portfolio 2 Columns</a>
      </li>
      <li class="menu-item">
        <a href="portfolio.html">Portfolio 3 Columns</a>
      </li>
      <li class="menu-item">
        <a href="portfolio-4-columns.html">Portfolio 4 Columns</a>
      </li>
      <li class="menu-item">
        <a href="portfolio-5-columns.html">Portfolio 5 Columns</a>
      </li>
    </ul>
  </li>
  
  <li class="menu-item menu-item-has-children">
    <a href="blog.html">Blog</a>
    <ul class="sub-menu">
      <li class="menu-item">
        <a href="blog.html">Blog 2 Columns</a>
      </li>
      <li class="menu-item">
        <a href="blog-3-columns.html">Blog 3 Columns</a>
      </li>
    </ul>
  </li>

  <li class="menu-item">
    <a href="contact.html">Contact</a>
  </li>
</ul>

Main menu item example:

<li class="menu-item">
  <a href="contact.html">Contact</a>
</li>

Main menu item with submenu:

<li class="menu-item menu-item-has-children current-menu-item">
  <a href="index.html">About Me</a>
  <ul class="sub-menu">
    <li class="menu-item current-menu-item">
      <a href="index.html">About Me 1</a>
    </li>
    <li class="menu-item">
      <a href="index-2.html">About Me 2</a>
    </li>
  </ul>
</li>

This class is added to a menu item that has a submenu: "menu-item-has-children"

Active main menu item:

<li class="menu-item menu-item-has-children current-menu-item">
  <a href="index.html">About Me</a>
  <ul class="sub-menu">
    <li class="menu-item current-menu-item">
      <a href="index.html">About Me 1</a>
    </li>
    <li class="menu-item">
      <a href="index-2.html">About Me 2</a>
    </li>
  </ul>
</li>

This class is added to the active menu item: current-menu-item

4. Page content

The main content of the page is placed in the following structure:

<div id="main" class="site-main">
  <div id="main-content" class="single-page-content">
    <div id="primary" class="content-area">    
      <div id="content" class="page-content site-content single-post" role="main">

        There will be a row and bootstrap columns with content

      </div>
    </div>
  </div>
</div>

5. Edit skills

Skill block:

<!-- Skill 1 -->
<div class="clearfix">
  <h4>UI/UX Design</h4>
  <div class="skill-value">95%</div>
</div>

<div id="skill_1" data-value="95" class="skill-container">
  <div class="skill-percentage"></div>
</div>
<!-- /Skill 1 -->

The value for the skill data-value="95"

6. Edit services

Open index.html or index-2.html file.
Find 'div' with 'class="info-list-w-icon"

Edit text in the following 'div':

<div class="info-list-w-icon">
  <div class="info-block-w-icon">
    <div class="ci-icon">
      <i class="lnr lnr-store"></i>
    </div>
    <div class="ci-text">
      <h4>Ecommerce</h4>
      <p>Pellentesque pellentesque, ipsum sit amet auctor accumsan, odio tortor bibendum massa, sit amet ultricies ex lectus scelerisque nibh. Ut non sodales.></p>
    </div>
  </div>
  <div class="info-block-w-icon">
    <div class="ci-icon">
      <i class="lnr lnr-laptop-phone"></i>
    </div>><div class="ci-text">
      <h4>Web Design></h4>
      <p>Pellentesque pellentesque, ipsum sit amet auctor accumsan, odio tortor bibendum massa, sit amet ultricies ex lectus scelerisque nibh. Ut non sodales.></p>
    </div>
  </div>
</div>

You can choose an icon

<i class="lnr lnr-store"></i>

from the following fonts: Font Awesome Free version 5.12.1 (The complete set of 1,341 icons), Linearicons Free Font.

Save file.
If you want to use an icon image instead of a font icon, you need to do the following:

Replace this code:

<div class="ci-icon">
  <i class="lnr lnr-laptop-phone"></i>
</div>

With this code:

<div class="ci-icon">
  <img src="img/service/web_design_icon.png" alt="Service">
</div>

Where you need to replace the 'src' to the path to your image (icon).

7. Edit portfolio page

The structure of the "Portfolio" subpage:

<!-- Portfolio Content -->
<div class="portfolio-content">

  <ul class="portfolio-filters">
    <li class="active">
      <a class="filter btn btn-sm btn-link" data-group="category_all">All</a>
    </li>
    <li>
      <a class="filter btn btn-sm btn-link" data-group="category_media">Media</a>
    </li>
    <li>
      <a class="filter btn btn-sm btn-link" data-group="category_mockups">Mockups</a>
    </li>
    <li>
      <a class="filter btn btn-sm btn-link" data-group="category_soundcloud">SoundCloud</a>
    </li>
    <li>
      <a class="filter btn btn-sm btn-link" data-group="category_vimeo-videos">Vimeo Videos</a>
    </li>
    <li>
      <a class="filter btn btn-sm btn-link" data-group="category_youtube-videos">YouTube Videos</a>
    </li>
  </ul>

  <!-- Portfolio Grid -->
  <div class="portfolio-grid three-columns">
    
    <figure class="item lbaudio" data-groups='["category_all", "category_soundcloud"]'>
      <div class="portfolio-item-img">
        <img src="images/portfolio/1.jpg" alt="SoundCloud Audio" title="" />
        <a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/221650664&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" class="lightbox mfp-iframe" title="SoundCloud Audio"></a>
      </div>

      <i class="fa fa-volume-up"></i>
      <h4 class="name">SoundCloud Audio</h4>
      <span class="category">SoundCloud</span>
    </figure>
    ...
  </div>
  <!-- /Portfolio Grid -->
</div>
<!-- /Portfolio Content -->

Each item in the portfolio grid should be wrapped in the HTML tag <figure>...</figure>

You can add two types of content:

Page loaded via Ajax (page containing the image, carousel, video, etc., and a full description). portfolio-1.html a file content.
Content displayed via LightBox (Full image or video and caption).

7.1. Portfolio details page loaded via Ajax

Link will have a class of "ajax-page-load" and the href attribute with a path to the HTML page (portfolio-1.html etc.):

<figure class="item standard" data-groups='["category_all", "category_media"]'>
  <div class="portfolio-item-img">
    <img src="images/portfolio/2.jpg" alt="Media Project 2" title="" />
    <a href="portfolio-1.html" class="ajax-page-load"></a>
  </div>

  <i class="far fa-file-alt"></i>
  <h4 class="name">Media Project 2</h4>
  <span class="category">Media</span>
</figure>

Note : To test this Ajax loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP. You must open the portfolio page (example portfolio-1.html) file using "http://" since Ajax makes HTTP requests.

Ajax request can be made only to the files that exist on the same web server that servers the page from which the Ajax request is sent, not to external or remote servers for security reasons. This is called same-origin policy.

7.2. Content displayed via LightBox

To display the image link will have a class of "lightbox" and the href attribute with a path to the image:

<figure class="item lbimage" data-groups='["category_all", "category_mockups"]'>
  <div class="portfolio-item-img">
    <img src="images/portfolio/5.jpg" alt="Mockup Design 1" title="" />
    <a class="lightbox" title="Mockup Design 1" href="https://lmpixels.com/wp/kerge-wp/wp-content/uploads/2018/04/11.jpg"></a>
  </div>

  <i class="far fa-image"></i>
  <h4 class="name">Mockup Design 1</h4>
  <span class="category">Mockups</span>
</figure>

To display the video link will have a classes of "lightbox mfp-iframe" and the href attribute with a URL to the video:

<figure class="item lbvideo" data-groups='["category_all", "category_youtube-videos"]'>
  <div class="portfolio-item-img">
    <img src="images/portfolio/6.jpg" alt="YouTube Video 1" title="" />
    <a href="https://www.youtube.com/embed/bg0gv2YpIok" class="lightbox mfp-iframe" title="YouTube Video 1"></a>
  </div>

  <i class="fas fa-video"></i>
  <h4 class="name">YouTube Video 1</h4>
  <span class="category">YouTube Videos</span>
</figure>

8. YouTube and Vimeo Video Embedding

Link format for embedding videos:

YouTube: https://www.youtube.com/embed/id. Example: https://www.youtube.com/embed/w5tWYmIOWGk

Vimeo: https://player.vimeo.com/video/id. Example: https://player.vimeo.com/video/97102654

Note : To test video loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP.

9. Google Recaptcha V2 options

By default, the template uses global Google Recaptcha V2 keys, if you want to use your keys, then you can create new keys here.

1. Replace site key in the index.html:

2. Replace Site secret key in the contact_form/contact_form.php:

10. Google Map

Change of address

Open js/main.js file

Go to lines:

//Google Maps
$("#map").googleMap({
    zoom: 16 // Google Map ZOOM. You can change this value
});
$("#map").addMarker({
    address: "S601 Townsend Street, San Francisco, California, USA", // Your Address. Change it
});

and replace "S601 Townsend Street, San Francisco, California, USA" with your address.

Save file.

API key

If Google Maps does not work, then you need to create a key for Google Maps and add it to the index.html file. To create the key, go here.

After you have created the key, add it to the index.html, for this:

Open index.html file
Go to line - <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> and remove it
Find this line -  and replace it with <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>. Instead of "YOUR-API-KEY" paste the code that you received on Google's website.
Save file.

Removing Google Maps

To remove Google Maps from the page, do the following:

Open index.html.file

Go to line:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

and remove it.

Go to line:

<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>-->

and remove it.

Go to line:

<script type="text/javascript" src="js/jquery.googlemap.js"></script>

and remove it.

Go to line:
```
<div id="map" class="map"></div>
```
and remove it.
Save index.html file
Open js/main.js file

Go to lines:

 //Google Maps
$("#map").googleMap({
    zoom: 16 // Google Map ZOOM. You can change this value
});
$("#map").addMarker({
    address: "S601 Townsend Street, San Francisco, California, USA", // Your Address. Change it
});

and delete them.

Save file.

FAQ

Q: I work with the template on the local computer without using a server or local server and the following problem arose - the portfolio Media projects are not opened.
A: These portfolio projects are opened with the help of Ajax technology, for correct operation of Ajax you need to use a server or a local server, i.e. the page of the template should be opened through the protocol https:// or https://, and not throught the protocol file://. These are the rules of browsers. But there is one exception, it's the Mozilla Firefox browser.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.

Leven - Resume / CV / vCard Template v1.5.

Complete Documentation

Thank you very much for purchasing from LMPixels!

Table of Contents

Template Installation

Upload to The Server

HTML Structure

HTML files

CSS Files and Structure

Scripts

PHP Integration (Contact Form)

Fonts

Credits

Customization

1. About files editing

2. Header logo

2.1. Text Logo + Symbol

2.2. Image Logo

3. Main menu

3.1. Main menu code

4. Page content

5. Edit skills

6. Edit services

7. Edit portfolio page

7.1. Portfolio details page loaded via Ajax

7.2. Content displayed via LightBox

8. YouTube and Vimeo Video Embedding

9. Google Recaptcha V2 options

10. Google Map

Change of address

API key

Removing Google Maps

FAQ